<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>订单列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- jquery -->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
    <script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <link type="text/css" th:href="@{/radio/css/checkbox_radio.css}" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" th:src="@{/address/distpicker.data.js}"></script>
    <script type="text/javascript" th:src="@{/address/distpicker.js}"></script>

</head>

<body>

<div class="panel-default">
    <div class="panel-heading">
        秒杀详情
    </div>
    <div>

        <div class="card" id="shipping">

        </div>
        <!-- 按钮触发模态框 -->
        <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增地址</button>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
                    </div>
                    <div class="modal-body">
                        <div data-toggle="distpicker" id="address">
                            <input type="text" id="receiver-name" placeholder="收货人姓名" class="form-control">
                            <input type="text" id="receiver-phone" placeholder="收货人电话" class="form-control">
                            <select data-provice="---选择省---" class="form-control" style="width: 200px"
                                    id="address-province" name="address-province"></select>
                            <select data-city="---选择市---" class="form-control" style="width: 200px"
                                    name="address-city" id="address-city"></select>
                            <select data-district="---选择区---" class="form-control" style="width: 200px"
                                    name="address-district" id="address-district"></select>
                            <input type="text" placeholder="请输入街道,详细地址" class="form-control" id="address-address">
                            <button class="btn-primary" id="add-address">添加</button>
                        </div>
                    </div>
                    <div class="modal-footer">

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
    <div class="panel-body">
        <div id="nick_name"></div>
        <table class="table" id="goodlist">
            <tr>
                <td>
                    商品名称
                </td>
                <td id="goodsName" colspan="3"></td>
            </tr>
            <tr>
                <td>商品原价</td>
                <td id="goodPrice" colspan="3"></td>
            </tr>
            <tr>

                <td>
                    秒杀开始时间: <span id="startTime"></span>
                    <input id="remainSeconds" hidden="hidden"/>
                    <span id="secondKillStatus">秒杀倒计时<span id="countDown"></span>秒</span>
                </td>
                <td>
                    <input type="text" hidden="hidden" id="miaosha-id">
                    <button class="btn btn-primary btn-block" id="buy-button">秒杀</button>
                    <div class="form-inline">
                        <img id="verifyCode" src="/kaptcha" onclick="this.src='/kaptcha?d='+new Date()*1">
                        <input class="form form-control" id="verifyCodeInput" type="text">
                    </div>
                </td>

            </tr>

            <tr>
                <td>
                    秒杀价格:
                    <div id="secondKillPrice"></div>
                </td>
                <td>
                    剩余库存件数:
                    <div id="stock"></div>
                </td>
            </tr>
            <tr>
                <img id="goodsImg"/>
            </tr>
        </table>

    </div>

</div>

<script>
    $(
        function () {

            initStock();
            countDown();
            listShipping();
            $("Button[id='buy-button']").click(
                function () {
                   createPath();
                }
            );
            var id = GetUrlParam("id");
            showGoodDetail(id);

            initAddress();
            addAddressClick();


            function initAddress() {
                $("#address").distpicker();

            }
function createPath() {
                $.ajax(
                    {
                        url:"/secondKill/createpath",
                        data:{
                            "miaoshaId":$("input[id='miaosha-id']").val(),
                            "veryfyCode":$("input[id='verifyCodeInput']").val()
                        },     
                        success:function (res) {
                            if (res.code===1) {
                                buy(res.data)
                            }
                            else {
                                layer.msg(res.msg)
                            }
                        }
                    }
                )

}
            function listShipping() {
                $.ajax({
                    url: '/shipping/list',
                    type: 'POST',
                    success: function (res) {
                        if (res.data.code == 0) {
                            layer.msg(res.msg);
                        }
                        else {
                            var html = "";
                            $.each(res.data, function (i, item) {
                                // html += "         <span style='display: inline-block'> <span>收货人姓名:</span>" +
                                //     "            <div class='card-header' id='receiver_name'>" + item.receiverName + "</div>" +
                                //     "            <span>收货人电话:</span>" +
                                //     "            <div class='card-body' id='receiver_telephone'>" + item.receiverPhone + "</div>" +
                                //     "            <div class='card-footer'>" + item.province + "," + item.city + "," + item.district + "," + item.address + "</div>" +
                                //     "            <input type='radio' name='shipping-option' id='shipping-option' class='radio-button' value=" + item.id + "></span>"
                                html += "   <label class='radio'>"
                                    + "<input type='radio' name='shipping-option' value='" + item.id + "'>"
                                    + "<i class='icon-radio'></i>"
                                    + "<div>收货人姓名:" + item.receiverName + "</div>"
                                    + "<div>手机号:" + item.receiverPhone + "</div>"
                                    + "<div>" + item.province + "," + item.city + "," + item.district + "," + item.address + "</div>"
                                    + "<button class='glyphicon glyphicon-trash btn btn-primary' id='delete-shipping' value='" + item.id + "'></button>"
                                    + "</label>"
                            });
                            $("#shipping").html(html);
                            $("button[id='delete-shipping']").click(
                                function () {
                                    var shippingId = $(this).val();
                                    alert(shippingId);
                                    deleteShipping(shippingId)
                                }
                            );
                        }
                    }
                })

            }
function initStock() {
    $.ajax(
        {
            url:'/secondKill/afterPropertiesSet',
            type:'post',
            success:function (res) {
                layer.msg(res.msg)
            }
        }
    )
}
            function addAddressClick() {
                $("button[id='add-address']").click(
                    function () {
                        addAddress();
                    }
                )

            }

            function addAddress() {
                var province = $("#address-province option:selected").val();
                var city = $("#address-city option:selected").val();
                var district = $("#address-district option:selected").val();
                var address = $("input[id='address-address']").val();
                var receiverName = $("input[id='receiver-name']").val();
                var receiverPhone = $("input[id='receiver-phone']").val();
                $.ajax({
                    url: "/shipping/add",
                    type: 'POST',
                    data: {
                        "province": province,
                        "city": city,
                        "address": address,
                        "district": district,
                        "receiverName": receiverName,
                        "receiverPhone": receiverPhone

                    },
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg);
                        }

                        else {
                            listShipping();
                            $("#myModal").modal('hide');
                            layer.msg(res.msg);
                        }
                    }
                })


            }
function refreshVeryfyCode() {
                $.ajax({
                    url:"/kaptcha"
                })

}
            function countDown() {
                var remainSeconds = $("#remainSeconds").val();
                var timeout;
                if (remainSeconds > 0) {//秒杀还没开始，倒计时
                    $("#buyButton").attr("disabled", true);
                    timeout = setTimeout(function () {
                        $("#countDown").text(remainSeconds - 1);
                        $("#remainSeconds").val(remainSeconds - 1);
                        countDown();
                    }, 1000);
                } else if (remainSeconds == 0) {//秒杀进行中
                    $("#buyButton").attr("disabled", false);
                    if (timeout) {
                        clearTimeout(timeout);
                    }
                    $("#miaoshaTip").html("秒杀进行中");
                } else {//秒杀已经结束
                    $("#buyButton").attr("disabled", true);
                    $("#miaoshaTip").html("秒杀已经结束");
                }

            }

            function showGoodDetail(id) {
                $.ajax({
                        url: "/goods/detail/" + id,
                        type: "POST",
                        success: function (res) {
                            $("#goodsName").text(res.data.goodsName);
                            $("#goodsImg").text(res.data.goodImg);
                            $("#goodPrice").text(res.data.goodPrice);
                            $("#startTime").text(res.data.startTime);
                            $("#secondKillPrice").text(res.data.secondKillPrice);
                            $("#remainSeconds").text(res.data.remainSeconds);
                            $("#stock").text(res.data.stock);
                            $("#miaosha-id").val(res.data.detailId)
                        }
                    }
                )
            }

            function deleteShipping(shippingId) {

                $.ajax({
                    url: "/shipping/delete",
                    type: 'POST',
                    data: {
                        'shippingId': shippingId
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            listShipping()
                            layer.msg(res.msg);

                        }

                        else {

                            layer.msg(res.msg);
                        }
                    }
                })

            }

            function getOrderResult() {
                $.ajax(
                    {
                        url: '/secondKill/result',
                        data: {
                            'miaoshaId': $("#miaosha-id").val()
                        },
                        type: 'POST',
                        success: function (res) {
                            if (res.code == 0) {
                                if (res.msg === "-1") {
                                    getOrderResult()
                                }
                                else {
                                    layer.msg("T _ T 很抱歉，您没抢到。")
                                }

                            }
                            else {
                                layer.msg("抢购成功,麻烦您火速付款！～")
                            }
                        }
                    }
                )

            }

            function buy(path) {
                var miaoshaId = $("#miaosha-id").val();
                var shppingId = $("input[name='shipping-option']:checked").val();
                $.ajax({
                    url: '/secondKill/'+path+'/buy',
                    data: {
                        "secondKillId": miaoshaId,
                        "shippingId": shppingId
                    },
                    success: function (res) {
                        if (res.code == 0) {

                            layer.msg(res.msg);
                        }

                        else {
                            getOrderResult()
                            layer.msg(res.msg);
                        }
                    }
                })
            }
        }
    )


</script>
</body>
</html>